<template>
  <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="add-o" size="18"/>
    </template>
  </van-nav-bar>
  <div id="content">
    <router-view/>
  </div>
  <van-tabbar router @change="onChange">
    <van-tabbar-item icon="home-o" to="/" name="index">主页</van-tabbar-item>
    <van-tabbar-item icon="video-o" to="/teach" name="teach">教学</van-tabbar-item>
    <van-tabbar-item icon="edit" to="/doJob" name="doJob">做题</van-tabbar-item>
    <van-tabbar-item icon="friends-o" to="/user" name="user">个人</van-tabbar-item>
  </van-tabbar>
</template>
<script setup lang="ts">
import {Toast} from "vant";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";
import routes from "../router/index";

const router = useRouter();
const route = useRoute();
const DEFAULT_TITLE = '辅导猿';
const title = ref(DEFAULT_TITLE)

router.beforeEach((to, from) => {
  const toPath = to.path;
  const route = routes.find((route) => {
    return toPath == route.path
  })
  title.value = route?.title ?? DEFAULT_TITLE
})

const onClickLeft = () => {
  router.back()
};
const onClickRight = () => {
  router.push('/search')
};

const onChange = (index) => Toast(`标签${index}`)


</script>

<style scoped>
#content {
  padding-bottom: 50px;
}
</style>
